<template>
    <view class="page bgf8" :style="{'--color': color}">
        <status-bar title='订单详情'></status-bar>
        <view class="padding20">
            <view class="card">
                <view class="size32 black bold">桌号：{{ pageData.table_code_name || '' }}</view>
            </view>
        </view>
        <view class="p-left20 p-right20">
            <view class="goodsList card">
                <view class="d-flex j-sb a-center p-bot10">
                    <view class="size30 black bold">{{ pageData.shopName }}</view>
                    <text class="iconfont icon-dingwei size40" :style="{color}" @click="locate"></text>
                </view>
                <view class="d-flex m-top20" v-for="(item,index) in pageData.goodsData" :key="index">
                    <image class="thumb bor_radius_4" :src="$imgUrls(item.goods_img)" mode="aspectFill"></image>
                    <view class="flex-1 d-flex f-column j-sb p-left20">
                        <view class="size28 color_33 ellipsis">{{item.goods_name}}</view>
                        <view class="h7 color_99 ellipsis">{{item.specs_bind_text}}</view>
                        <view class="d-flex j-sb a-center">
                            <view class="color_E9">
                                <text class="h7">￥</text>
                                <text class="size28">{{item.price}}</text>
                            </view>
                            <view class="h6 color_99">x {{item.goods_num}}</view>
                        </view>
                    </view>
                </view>
                <!-- 店铺活动 -->
                <view class="d-flex a-center m-top30" v-if="pageData.act_money > 0">
                    <view class="flex-1 size28 ellipsis m-right20">{{pageData.usedActTitle}}<text class="h6 color_66 m-left10">({{pageData.act_title}})</text></view>
                    <view class="size32 color_E9">-￥{{pageData.act_money}}</view>
                </view>
                <!-- 会员折扣 -->
                <view class="d-flex a-center m-top30" v-if="pageData.vip_money > 0">
                    <view class="flex-1 size28 ellipsis m-right20">{{pageData.vipActTitle}}<text class="h6 color_66 m-left10">({{pageData.vip_title}})</text></view>
                    <view class="size32 color_E9">-￥{{pageData.vip_money}}</view>
                </view>
                <!-- 优惠券 -->
                <view class="d-flex a-center m-top30" v-if="pageData.dis_money > 0">
                    <view class="flex-1 size28 ellipsis m-right20">优惠券<text class="h6 color_66 m-left10">({{pageData.dis_title}})</text></view>
                    <view class="size32 color_E9">-￥{{pageData.dis_money}}</view>
                </view>
                <!-- 积分 -->
                <view class="d-flex j-sb a-center m-top30" v-if="pageData.fen_to_money > 0">
                    <view class="size28">积分抵扣<text class="h6 color_66 m-left10">(使用{{pageData.used_fen}}积分)</text></view>
                    <view class="size32 color_E9">-￥{{pageData.fen_to_money}}</view>
                </view>
                <view class="d-flex j-end a-center p-top60 bold">
                    <view class="size26" v-if="pageData.allDiscount">已优惠</view>
                    <view class="size32 color_E9" v-if="pageData.allDiscount">-￥{{ pageData.allDiscount || '0.0' }}</view>
                    <view class="size26 m-left20 m-right20">共{{parseInt(pageData.num) || ''}}件</view>
                    <view class="size26">合计</view>
                    <view class="size26 color_E9">￥</view>
                    <view class="size42 color_E9" v-if="parseFloat(pageData.payment) > 0">{{pageData.payment}}</view>
                    <view class="size42 color_E9" v-else>{{pageData.used_balance || ''}}</view>
                </view>
            </view>
        </view>
        <view class="padding20">
            <view class="card">
                <view class="size30 black bold m-bot30">订单信息</view>
                <view class="d-flex j-sb a-center m-bot20">
                    <view class="color_66">订单编号</view>
                    <view v-if="pageData.order_code">
                        <text>{{ pageData.order_code }}</text>
                        <text class="m-left20" :style="{color}" @click="$pop.setClip(pageData.order_code)">复制</text>
                    </view>
                </view>
                <view class="d-flex j-sb a-center m-bot20">
                    <view class="color_66">下单时间</view>
                    <view v-if="add_time">{{ add_time }}</view>
                </view>
                <view class="d-flex j-sb a-center">
                    <view class="color_66">备注信息</view>
                    <view>{{ pageData.remarks || '无' }}</view>
                </view>
                <view class="d-flex j-sb a-center m-top20" v-if="pay_time">
                    <view class="color_66">支付时间</view>
                    <view v-if="pay_time">{{ pay_time }}</view>
                </view>
            </view>
        </view>
        <view class="footer_info j-se" v-if="pageData.state == 0 || pageData.state == 4">
            <view class="btn flexac size28 color_99" @click="toUrl('/otherPage/custom/placeOrder?tid=' + tid)"
                v-if="pageData.state == 0">添加商品</view>
            <view class="btn flexac size28 white" @click="paySure" v-if="pageData.state == 0">去结算</view>
            <view class="btn flexac size28 white" @click="toUrl('/commentPage/comment/commentGoods?oid='+order_id)" 
                v-if="pageData.state == 4">立即评价</view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            order_id: '',
            pageData: '',
            add_time: '',
            pay_time: '',
            tid: ''
        }
    },
    computed: {
        ...mapState(['color']),
    },
    onLoad(e){
        if(e.order_id) this.order_id = e.order_id
        if(e.tid) this.tid = e.tid
    },
    onShow(){
        this.getDetail()
    },
    methods: {
        getDetail(){
            this.$http.post({
                url: '/zzj_singleSaleApi/orderSingleDetails',
                data: {
                    order_id: this.order_id,
                    tid: this.tid
                }
            }).then(res=>{
                this.pageData = res.data || ''
                this.add_time = this.$common.timeFormat(this.pageData.add_time, 'Y-M-D h:m:s')
                if(!this.pageData.pay_time) return
                this.pay_time = this.$common.timeFormat(this.pageData.pay_time, 'Y-M-D h:m:s')
            })
        },
        locate(){
            uni.openLocation({
                longitude: parseFloat(this.pageData.shopPointx), // 经度
                latitude: parseFloat(this.pageData.shopPointy), // 纬度
                name: this.pageData.shopName,
                address: this.pageData.shopAdress,
                complete(res){
                    console.log(res)
                }
            })
        },
        paySure(){
            if(this.pageData.payID){
                // #ifdef H5
                window.location.href ='https://sra.mogoie.com/index.php/accountPay/weChatCashierPage?orderStr=' + res.payID
                // #endif
                // #ifndef H5
                this.toUrl('/moneyPage/capital/checkstand?payid=' + this.pageData.payID+'&path=1')
                // #endif
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
}
.card {
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
    border-radius: 20rpx;
    background: #fff;
    padding: 30rpx;
}
.goodsList {
    .thumb {
        width: 120rpx;
        height: 120rpx;
        border: 1px solid #ddd;
    }
}
.footer_info {
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    padding-top: 30rpx;
    .btn {
        width: 230rpx;
        height: 70rpx;
        border-radius: 10rpx;
        &:first-child {
            border: 2rpx solid #ddd;
        }
        &:last-child {
            background: var(--color);
        }
    }
}
</style>